<template>
  <div>
    <div style="justify-content: center; display: flex">
      <el-input
        v-model="keywords"
        placeholder="通过用户名搜索用户"
        size="small"
        style="width: 330px"
        prefix-icon="el-icon-search"
        value="dasdasd"
      ></el-input>
      <el-button type="primary" style="margin-left: 8px" @click="searchBtn"
        >搜索</el-button
      >
    </div>
    <div
      style="
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 10px;
      "
    >
      <el-card class="box-card" v-for="(value, index) in sysAdmin" :key="index">
        <div slot="header" class="clearfix">
          <!-- 名字 -->
          <span>{{ value.name }}</span>
          <el-button
            style="float: right; padding: 3px 0; color: red"
            type="text"
            icon="el-icon-delete"
            @click="deleteBtn(value)"
          ></el-button>
        </div>
        <div>
          <!-- 图片 -->
          <div class="img-container">
            <img
              :src="value.userFace"
              :alt="sysAdmin.name"
              :title="sysAdmin.name"
              class="userface-img"
            />
          </div>
        </div>
        <div class="userinfo-container">
          <div>用户名:{{ value.name }}</div>
          <div>手机号码:{{ value.phone }}</div>
          <div>电话号码:{{ value.telephone }}</div>
          <div>地址:{{ value.address }}</div>
          <div>
            <el-switch
              style="display: block"
              v-model="value.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="禁用"
              inactive-text="启用"
              @change="enabledChange(value)"
            >
            </el-switch>
          </div>
          <!-- 角色遍历 -->
          <div>
            用户角色:
            <el-tag
              type="success"
              v-for="(role, indexj) in value.roles"
              :key="indexj"
              style="margin-right: 4px"
            >
              {{ role.nameZh }}
            </el-tag>
            <el-popover
              placement="right"
              title="角色列表"
              width="200"
              trigger="click"
              @show="showPop(value)"
              @hide="hidePop(value)"
            >
              <el-select v-model="rolesArr" placeholder="请选择" multiple>
                <el-option
                  v-for="(r, index) in allRoles"
                  :key="index"
                  :label="r.nameZh"
                  :value="r.id"
                >
                </el-option>
              </el-select>
              <el-button
                slot="reference"
                type="text"
                icon="el-icon-more"
              ></el-button>
            </el-popover>
          </div>
          <div>备注： {{ value.remark }}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysAdmin",
  data() {
    return {
      sysAdmin: [],
      keywords: "",
      allRoles: [],
      rolesArr: [], //角色显示数组
    };
  },
  mounted() {
    this.getAllsysadmin();
  },
  methods: {
    // hide弹窗消失事件
    hidePop(admin) {
      let roles = [];
      Object.assign(roles, admin.roles);
      let flag = false;
      if (roles.length != this.rolesArr.length) {
        flag = true;
      } else {
        for (let i = 0; i < roles.length; i++) {
          let role = roles[i];
          for (let j = 0; j < this.rolesArr.length; j++) {
            let sr = this.rolesArr[j];
            if (role.id == sr) {
              roles.splice(i, 1);
              i--;
              break;
            }
          }
        }
        if (roles.length != 0) {
          flag = true;
        }
      }

      if (flag) {
        let url = "/system/admin/role?adminId=" + admin.id;
        this.rolesArr.forEach((sr) => {
          url += "&rids=" + sr;
        });
        this.putRequest(url).then((resp) => {
          if (resp) {
            this.getAllsysadmin();
          }
        });
      }
    },

    //show事件
    showPop(value) {
      this.initAllRoles();
      let ve = value.roles;
      this.rolesArr = [];
      ve.forEach((element) => {
        this.rolesArr.push(element.id);
      });
    },
    // 获取所以角色
    initAllRoles() {
      this.getRequest("/system/admin/roles").then((resp) => {
        if (resp) {
          this.allRoles = resp;
        }
      });
    },
    getAllsysadmin() {
      this.getRequest("/system/admin/").then((resp) => {
        this.sysAdmin = resp;
      });
    },
    // 查询接口
    searchBtn() {
      this.getRequest("/system/admin/?keywords=" + this.keywords).then(
        (resp) => {
          if (resp) {
            this.sysAdmin = resp;
          }
        }
      );
    },
    //删除接口
    deleteBtn(value) {
      this.$confirm(
        "此操作将永久删除" + value.name + "," + "是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/system/admin/", value.id).then((resp) => {
            if (resp) {
              this.getAllsysadmin();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    enabledChange(value) {
      this.putRequest("/system/admin/", value).then((resp) => {
        if (resp) {
          this.getAllsysadmin();
        }
      });
    },
  },
};
</script>

<style>
.box-card {
  width: 400px;
  margin-bottom: 20px;
}
.userface-img {
  width: 72px;
  height: 72px;
  border-radius: 72px;
}
.img-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.userinfo-container {
  font-size: 12px;
  color: #409eff;
}
</style>
